<template>
  <div class="content">
    <div class="input size">
      <el-row class="demo-autocomplete">
        <!-- style="align-items: flex-end" -->
        <el-col :span="5" class="inpt_in">
          <el-form class="demo-form-inline">
            <el-form-item label="物品名称" :label-width="formLabelWidth">
              <el-input v-model="getDataParama.query.name" autocomplete="off" placeholder="请输入内容"></el-input>
            </el-form-item>
          </el-form>
        </el-col>
        <el-col :span="5" class="inpt_in">
          <el-form class="demo-form-inline">
            <el-form-item label="物品类型" :label-width="formLabelWidth">
              <el-select v-model="getDataParama.query.type" placeholder="下拉选择">
                <el-option key="" label="全部" value=""></el-option>
                <el-option v-for="item in droplist2" :key="item.id" :label="item.name" :value="item.id"></el-option>
              </el-select>
            </el-form-item>
          </el-form>
        </el-col>
		<el-col :span="2" class="inpt_in">
		  <el-button style="width: 5vw;" type="primary" @click="querySearch">搜索</el-button>
		</el-col>
		<el-col :span="2" class="inpt_in">
		  <el-button style="width: 5vw;" type="primary" @click="clickRemovesDialogForm1 = true;insertOrUpdate=true;title='添加商品';insertDataParama={}">添加</el-button>
		</el-col>
      </el-row>
    </div>
	<div style="margin-top: 5vh;width: 30vw;display: flex;justify-content: flex-start;margin-left: 1vw;">
		<el-button style="width: 5vw;" type="primary" @click="getDataParama.query.state='';querySearch()">全部</el-button>
		<el-button style="width: 5vw;" type="primary" @click="getDataParama.query.state='1';querySearch()">上架</el-button>
		<el-button style="width: 5vw;" type="primary" @click="getDataParama.query.state='0';querySearch()">下架</el-button>
	</div>
    <div class="boder">
        <el-row>
          <el-table :data="tableData" border style="width: 100%" :header-cell-style="{'text-align':'center','color':'rgba(0,0,0,0.85)'}"
            @selection-change="handleSelectionChange" stripe>
            <el-table-column fixed prop="id" label="物品ID" width="160" align="center">
            </el-table-column>
            <el-table-column prop="typeName" label="物品类型" width="160" align="center">
            </el-table-column>
            <el-table-column prop="name" label="物品名称" width="160" align="center">
            </el-table-column>
            <el-table-column prop="marketHashName" label="market_hash_name" width="160" align="center">
            </el-table-column>
            <el-table-column prop="img" label="预览图" width="160" align="center">
              <template slot-scope="scope">
                <img v-if="scope.row.img" v-bind:src="scope.row.img" style="width:40px;height:40px;"/>
                <!-- <el-button type="text" size="small" @click="clickRemovesDialogForm1 = true;insertOrUpdate=false;title='编辑商品';insertDataParama=scope.row;onLoadLX()">编辑</el-button>
                <el-button type="text" size="small" @click="xiajia(scope.row.id)">下架</el-button>                 -->
              </template>
            </el-table-column>
            <el-table-column prop="qualityName" label="品质" width="160" align="center">
            </el-table-column>
            <el-table-column prop="looking" label="外观" width="160" align="center">
            </el-table-column>
            <el-table-column prop="cooling" label="冷却时间" width="150" align="center">
            </el-table-column>
            <el-table-column prop="price" label="售价" width="75" align="center">
            </el-table-column>
			      <el-table-column prop="order" label="排序" width="75" align="center">
			      </el-table-column>
            <el-table-column fixed="right" label="操作" width="150" align="center">
              <template slot-scope="scope">
                <el-button type="text" size="small" @click="clickRemovesDialogForm1 = true;insertOrUpdate=false;title='编辑商品';insertDataParama=scope.row;onLoadLX();imageUrl=scope.row.img">编辑</el-button>
                <el-button type="text" size="small" @click="xiajia(scope.row.id)">下架</el-button>                
              </template>
            </el-table-column>
          </el-table>
          <el-pagination
            background
            layout="prev, pager, next,total"
            :page-count="getDataParama.pageCount"
            @current-change="handleCurrentChange">
        </el-pagination>
        </el-row>
      <!-- 新增 -->
     <!-- <el-dialog title="新增" :visible.sync="addDialogForm">
        <addModel @fatherMethod="clickAddDialogForm"></addModel>
      </el-dialog> -->
      <!-- 添加商品弹窗 -->
      <el-dialog :title="title" :visible.sync="clickRemovesDialogForm1" top="5vh" @close="insertDataParama={};wppzList=[];imageUrl=''">
          <el-row :span="16" class="row-bg" style="margin-top: 2vh;">
            <el-col :span="12">
              <el-form class="demo-form-inline">
                <el-form-item label="物品类型" :label-width="formLabelWidth">
                  <el-select v-model="insertDataParama.type" @change="wplxChange">
                    <el-option v-for="item1 in droplist2" :key="item1.id" :label="item1.name" :value="item1.id"></el-option>
                  </el-select>
                </el-form-item>
              </el-form>
            </el-col>
          </el-row>
        <el-row :span="16" class="row-bg" style="margin-top: 2vh;">
          <el-col :span="12">
            <el-form class="demo-form-inline">
              <el-form-item label="物品名称" :label-width="formLabelWidth">
                <el-input v-model="insertDataParama.name" autocomplete="off" placeholder="物品名称"></el-input>
              </el-form-item>
            </el-form>
          </el-col>
        </el-row>
        <el-row :span="16" class="row-bg" style="margin-top: 2vh;">
          <el-col :span="12">
            <el-form class="demo-form-inline">
              <el-form-item label="market_hash_name" :label-width="formLabelWidth">
                <el-input v-model="insertDataParama.marketHashName" autocomplete="off" placeholder="market_hash_name"></el-input>
              </el-form-item>
            </el-form>
          </el-col>
        </el-row>
        <el-row :span="16" class="row-bg" style="margin-top: 2vh;">
          <el-col :span="12">
            <el-form class="demo-form-inline">
              <el-form-item label="图片" :label-width="formLabelWidth">
                <!-- <el-input v-model="insertDataParama.img" autocomplete="off" placeholder="图片"></el-input> -->
                <el-upload
                  class="avatar-uploader"
                  v-bind:action="imgUpload"
                  :show-file-list="false"
                  :on-success="handleAvatarSuccess"
                  name="file">
                  <!-- <img v-if="insertDataParama.img" :src="insertDataParama.img" class="avatar"> -->
                  <img v-if="imageUrl" :src="imageUrl" class="avatar">
                  <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload>
              </el-form-item>
            </el-form>
          </el-col>
        </el-row>
        <el-row :span="16" class="row-bg" style="margin-top: 2vh;">
          <el-col :span="12">
            <el-form class="demo-form-inline">
              <el-form-item label="物品品质" :label-width="formLabelWidth">
                  <!-- <el-select v-model="insertDataParama.quality" @change="wplxChange"> -->
                  <el-select v-model="insertDataParama.quality" >
                    <el-option v-for="item1 in wppzList" :key="item1.id" :label="item1.name" :value="item1.id"></el-option>
                  </el-select>
                </el-form-item>
            </el-form>
          </el-col>
        </el-row>
        <el-row :span="16" class="row-bg" style="margin-top: 2vh;">
          <el-col :span="12">
            <el-form class="demo-form-inline">
              <el-form-item label="冷却时间" :label-width="formLabelWidth">
                <el-input v-model="insertDataParama.cooling" autocomplete="off" placeholder="冷却时间"></el-input>
              </el-form-item>
            </el-form>
          </el-col>
        </el-row>
        <el-row :span="16" class="row-bg" style="margin-top: 2vh;">
          <el-col :span="12" >
            <el-form class="demo-form-inline" >
              <el-form-item label="各平台价格" style="margin-bottom:0;" :label-width="formLabelWidth">
                <el-input style="width: 30%;" autocomplete="off"  ></el-input>
                <el-input style="width: 30%;" autocomplete="off"  ></el-input>
                <el-input style="width: 30%;" autocomplete="off"  ></el-input>
              </el-form-item>
            </el-form>
          </el-col>
          <el-col :span="24" >
            <el-form class="demo-form-inline" >
              <el-form-item style="margin-bottom:0;margin-left:0" :label-width="formLabelWidth">
                <el-button type="primary" >刷 新</el-button>
              </el-form-item>
            </el-form>
          </el-col>
        </el-row>

        <el-row :span="16" class="row-bg">
          <el-col :span="12">
            <el-form class="demo-form-inline">
              <el-form-item  :label-width="formLabelWidth">
                <el-input style="width: 30%;" autocomplete="off" value="俄罗斯1" disabled=""></el-input>
                <el-input style="width: 30%;" autocomplete="off" value="俄罗斯2" disabled=""></el-input>
                <el-input style="width: 30%;" autocomplete="off" value="俄罗斯3" disabled=""></el-input>
              </el-form-item>
            </el-form>
          </el-col>
        </el-row>

        <el-row :span="16" class="row-bg" style="margin-top: 2vh;">
          <el-col :span="12">
            <el-form class="demo-form-inline">
              <el-form-item label="商城价格系数" :label-width="formLabelWidth">
                <el-input v-model="insertDataParama.buyPercent" autocomplete="off" placeholder="商城价格系数" style="display:inline-block;float: right;"></el-input>
                <el-input v-model="insertDataParama.buyIncrements" autocomplete="off" placeholder="具体金额" ></el-input>
              </el-form-item>
            </el-form>
          </el-col>
        </el-row>
        <el-row :span="16" class="row-bg" style="margin-top: 2vh;">
          <el-col :span="12">
            <el-form class="demo-form-inline">
              <el-form-item label="本站售价" :label-width="formLabelWidth">
                <el-input v-model="insertDataParama.price" autocomplete="off" placeholder="本站售价"></el-input>
              </el-form-item>
            </el-form>
          </el-col>
        </el-row>
        <el-row :span="16" class="row-bg" style="margin-top: 2vh;">
          <el-col :span="12">
            <el-form class="demo-form-inline">
              <el-form-item label="外观" :label-width="formLabelWidth">
                <el-input v-model="insertDataParama.looking" autocomplete="off" placeholder="外观"></el-input>
              </el-form-item>
            </el-form>
          </el-col>
        </el-row>
        <el-row :span="16" class="row-bg" style="margin-top: 2vh;">
          <el-col :span="12">
            <el-form class="demo-form-inline">
              <el-form-item label="排序" :label-width="formLabelWidth">
                <el-input v-model="insertDataParama.order" autocomplete="off" placeholder="排序"></el-input>
              </el-form-item>
            </el-form>
          </el-col>
        </el-row>
        <div style="margin-top: 10vh;">
          <div slot="footer" class="dialog-footer" style="margin-left: 75%;width: 200px;">
            <el-button @click="clickRemovesDialogForm1=false">取 消</el-button>
            <el-button type="primary" @click="OKInsertPurchaseGoods">确 定</el-button>
          </div>
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import api from '../../../api/Basicpath/index'
  export default {
    // components: {
    //   addModel
    // },

    data() {
      return {
        imgUpload:`${api}/gamemall/upload/image`,
        imageUrl: '',
        clickRemovesDialogForm1:false,
        insertOrUpdate:false,
        title:"",
        input: '',
        getDataParama:{
          "currentPage":1,
          "pageSize":3,
          "total":100,
          "pageCount":0,
          "query":{
              "product_type":1,
              "name":"",
              "type":"",
              "state":""
          }
        },
        // addModelShow: false,
        insertDataParama:{
            "id":"",
            "productType":1,
            "type":1,
            "state":0,
            "name":"m4a1 雷神",
            "marketHashName":"m4a1 Thor",
            "img":"/ss/a.jpg",
            "quality":5,
            "cooling":10,
            "priceLowRussia":10.543,
            "priceLowIgxe":9.762,
            "priceLowC5":14.262,
            "buyPercentStr":"90.53%",
            "buyIncrements":50,
            "price":193.947,
            "order":1400,
            "createdAdminId":1,
            "looking":"伤痕累累"
        },
        addDialogForm: false,
        gridData: [{
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }],
        form: {
          name: '',
          region: '',
          date1: '',
          date2: '',
          delivery: false,
          type: [],
          resource: '',
          desc: ''
        },
        formLabelWidth: '8vw',
        droplist2: [],
        tableData: [],
        checked: false,
        checkeds: false,
        state1: '',
        state2: '',
        multipleSelection: [],
        wppzList:[]

      }
    },
    methods: {
      handleAvatarSuccess(res, file) {
        this.imageUrl = URL.createObjectURL(file.raw);
        this.insertDataParama.img = res.data;
        console.log(this.insertDataParama.img);
      },
      OKInsertPurchaseGoods(){
        this.insertDataParama.createdAdminId = localStorage.getItem("currentId");
        this.insertDataParama.buyPercentStr = this.insertDataParama.buyPercent;
        if(this.insertOrUpdate){
          //insert
          this.insertPurchaseGoods();
        }else{
          //update
          this.updatePurchaseGoods();
        }
        this.insertDataParama = {};
      },
      handleSelectionChange(val) {
        this.multipleSelection = val;
      },
      toggleSelection(rows) {
        if (rows) {
          rows.forEach(row => {
            this.$refs.multipleTable.toggleRowSelection(row);
          });
        } else {
          this.$refs.multipleTable.clearSelection();
        }
      },
      handleCurrentChange(pageNumber) {
        this.getDataParama.currentPage = pageNumber;
        this.loadGetData();
      },
      querySearch() {
		    this.getDataParama.pageCount = 0
        this.loadGetData();
      },
      handleSelect() {

      },
      currentPage4() {

      },
      handleSizeChange() {

      },
      wplxChange(value){
        this.onLoadLX();
        // var flag =false;
        // for(var i = 0;i<this.wppzList.length;i++){
        //   console.log(this.wppzList[i].id);
        //   console.log(this.insertDataParama.quality);
        //   if(this.insertDataParama.quality = this.wppzList[i].id){
        //     flag = true;
        //     break;
        //   }
        // }
        // if(!flag){
        //   this.insertDataParama.quality = this.wppzList[0].id;
        // }
      },
      onLoadLX(){
        this.$axios.get(`${api}/gamemall/droplist/quality`,{"id":this.insertDataParama.type})
        .then( res => {
          if(res.code === 200){
            console.log(res);
            this.wppzList = res.obj;
          }
        })
        .catch( err =>{
          // this.$message({
          //     message: err.msg || '请求数据失败',
          //     type: 'warning'
          //   })
        })
      },
      xiajia(id){
        let para = {
                "id":id,
                "state":0
              };
        this.$axios.post(`${api}/gamemall/mallItem/update`,para)
        .then( res => {
          if(res.code === 200){
            this.$message({
              message: '下架成功',
              type: 'warning'
            });
            this.loadGetData();
          }
        })
        .catch( err =>{
          // this.$message({
          //     message: err.msg || '请求数据失败',
          //     type: 'warning'
          //   })
        })
        
      },
      list(){
        this.$axios.get(`${api}/gamemall/droplist/type`,{})
        .then( res => {
          if(res.code === 200){
            this.droplist2 = res.obj;
          }
        })
        .catch( err =>{
          // this.$message({
          //     message: err.msg || '请求数据失败',
          //     type: 'warning'
          //   })
        })
      },
      loadGetData(){
        this.$axios.post(`${api}/gamemall/mallItem/searchListByPage`,this.getDataParama)
        .then( res => {
          // if(res.code === 200 ){
          //   console.log(res.data);
          //   if(res.data==null){
          //       this.getDataParama.currentPage = 1;
          //       this.getDataParama.pageCount = 0;
          //       this.tableData =[];
          //   }else{
          //       this.tableData = res.data.list;
          //       this.getDataParama.pageCount = res.data.pages;
          //   }
          // }

            console.log(res.data);
            if(res.data==null){
                this.getDataParama.currentPage = 1;
                this.getDataParama.pageCount = 0;
                this.tableData =[];
            }else{
                this.tableData = res.data.list;
                this.getDataParama.pageCount = res.data.pages;
            }
        })
        .catch( err =>{
          // this.$message({
          //     message: err.msg || '请求数据失败',
          //     type: 'warning'
          //   })
        })
      },
      insertPurchaseGoods(){
        this.$axios.post(`${api}/gamemall/mallItem/add`,this.insertDataParama)
        .then( res => {
          if(res.code === 200){
            this.clickRemovesDialogForm1 =false;
            this.$message({
              message: '添加成功。',
              type: 'warning'
            });
            this.getDataParama.query.name = this.insertDataParama.name;
            this.querySearch();
          }else if(res.code === 500){
            this.$message({
              message: res.msg || '添加失败',
              type: 'warning'
            })
          }
        })
        .catch( err =>{
          // this.$message({
          //     message: err.msg || '操作失败',
          //     type: 'warning'
          //   })
        })
      },
      updatePurchaseGoods(){
        this.$axios.post(`${api}/gamemall/mallItem/update`,this.insertDataParama)
        .then( res => {
          if(res.code === 200){
            this.clickRemovesDialogForm1 =false;
            this.$message({
              message: '修改成功',
              type: 'warning'
            });
            this.querySearch();
          }else if(res.code === 500){
            this.$message({
              message: res.msg || '修改失败',
              type: 'warning'
            })
          }
        })
        .catch( err =>{
          // this.$message({
          //     message: err.msg || '操作失败',
          //     type: 'warning'
          //   })
        })
      },
			imgs() {
				this.$axios.post(`${api}/gamemall/upload/image`,this.insertDataParama)
				.then( res => {
				  if(res.code === 200){
				    this.clickRemovesDialogForm1 =false;
				    this.$message({
				      message: '修改成功。',
				      type: 'warning'
				    })
				  }
				})
			}
    },
    created:function (){
      this.list();
      this.loadGetData();
    }
  }
</script>

<style scoped>
  .content {
    width: 99%;
    height: 99%;
    margin-left: 0.5%;
    border: 1px solid #EBEEF5;
    background-color: #FFF;
    border-radius: 0.325rem;
  }
  .inpt_in {
    margin-top: 1%;
  }
  .boder {
    width: 98%;
    height: 75%;
    border: 1px solid #EBEEF5;
    margin-top: 2%;
    margin-left: 1%;
  }
  .size {
    font-size: 0.8rem;color: #606266;
  }
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader .el-upload {
		border: 1px dashed #d9d9d9;
		border-radius: 6px;
		cursor: pointer;
		position: relative;
		overflow: hidden;
	}
	.avatar-uploader .el-upload:hover {
		border-color: #409EFF;
	}
	.avatar-uploader-icon {
		font-size: 28px;
		color: #8c939d;
		width: 130px;
		height: 130px;
		line-height: 130px;
		text-align: center;
		border: 1px solid;
	}
	.avatar {
		width: 130px;
		height: 130px;
		display: block;
	}
</style>
